<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>魔塔50层</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        danger: '#FF4D4F',
                        success: '#52C41A',
                        dark: '#1D2129',
                        light: '#F5F7FA',
                        gold: '#FAAD14',
                        tower: '#8C6D31',
                        enemy: '#B71C1C',
                        stairs: '#5B8C5A',
                        door: '#7A634C',
                        treasure: '#F9A825'
                    },
                    fontFamily: {
                        pixel: ['"Press Start 2P"', 'cursive', 'system-ui', 'sans-serif'],
                        inter: ['Inter', 'system-ui', 'sans-serif']
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .pixel-corners {
                clip-path: polygon(
                    0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px,
                    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
                    4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px)
                );
            }
            .game-shadow {
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
            }
            .text-shadow {
                text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
            }
            .btn-pixel {
                position: relative;
                background-color: theme('colors.primary');
                color: white;
                border: none;
                padding: 8px 16px;
                clip-path: polygon(
                    0% 8px, 8px 8px, 8px 0%, calc(100% - 8px) 0%, calc(100% - 8px) 8px, 100% 8px,
                    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
                    8px 100%, 8px calc(100% - 8px), 0% calc(100% - 8px)
                );
            }
            .btn-pixel:hover {
                background-color: theme('colors.primary/90');
            }
            .btn-pixel:active {
                transform: translateY(2px);
            }
            .enemy-blink {
                animation: blink 0.2s step-end infinite alternate;
            }
            @keyframes blink {
                from { opacity: 1; }
                to { opacity: 0.6; }
            }
            .player-blink {
                animation: player-blink 0.2s step-end infinite alternate;
            }
            @keyframes player-blink {
                from { filter: hue-rotate(0deg); }
                to { filter: hue-rotate(180deg); }
            }
        }
    </style>
    
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-900 text-light font-inter min-h-screen flex flex-col overflow-hidden">
    <!-- 游戏容器 -->
    <div class="flex-grow flex flex-col lg:flex-row p-4 lg:p-8 gap-4">
        <!-- 游戏信息面板 -->
        <div class="w-full lg:w-1/4 bg-dark rounded-lg pixel-corners game-shadow p-4 flex flex-col gap-4">
            <div class="bg-gray-800 rounded-lg pixel-corners p-4">
                <h2 class="font-pixel text-primary text-lg mb-2 text-center">魔塔50层</h2>
                <div class="flex items-center justify-center mb-4">
                    <div class="w-16 h-16 bg-gray-700 rounded-lg flex items-center justify-center">
                        <i class="fa fa-user text-3xl text-primary"></i>
                    </div>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-400">角色:</span>
                        <span id="player-name" class="font-medium">勇者</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-400">楼层:</span>
                        <span id="current-floor" class="font-medium">1</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-400">生命:</span>
                        <span id="player-hp" class="font-medium text-success">1000</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-400">攻击:</span>
                        <span id="player-attack" class="font-medium text-danger">10</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-400">防御:</span>
                        <span id="player-defense" class="font-medium text-primary">10</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-400">金币:</span>
                        <span id="player-gold" class="font-medium text-gold">0</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-400">经验:</span>
                        <span id="player-exp" class="font-medium text-secondary">0</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-800 rounded-lg pixel-corners p-4">
                <h3 class="font-pixel text-primary text-sm mb-2">装备</h3>
                <div id="player-equipment" class="grid grid-cols-2 gap-2">
                    <div class="bg-gray-700 rounded pixel-corners p-2 text-center text-xs">
                        <i class="fa fa-sword text-gray-500"></i>
                        <p class="mt-1">木剑</p>
                    </div>
                    <div class="bg-gray-700 rounded pixel-corners p-2 text-center text-xs">
                        <i class="fa fa-shield text-gray-500"></i>
                        <p class="mt-1">皮甲</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-800 rounded-lg pixel-corners p-4 flex-grow">
                <h3 class="font-pixel text-primary text-sm mb-2">消息日志</h3>
                <div id="game-messages" class="h-40 overflow-y-auto text-xs space-y-1 text-gray-300">
                    <p>欢迎来到魔塔50层!</p>
                    <p>使用方向键移动角色</p>
                    <p>击败怪物获取金币和经验</p>
                    <p>寻找楼梯前往下一层</p>
                </div>
            </div>
            
            <div class="bg-gray-800 rounded-lg pixel-corners p-4">
                <div class="grid grid-cols-2 gap-2">
                    <button id="save-game" class="btn-pixel bg-primary text-xs flex items-center justify-center">
                        <i class="fa fa-save mr-1"></i> 保存
                    </button>
                    <button id="load-game" class="btn-pixel bg-secondary text-xs flex items-center justify-center">
                        <i class="fa fa-download mr-1"></i> 加载
                    </button>
                    <button id="restart-game" class="btn-pixel bg-danger text-xs flex items-center justify-center">
                        <i class="fa fa-refresh mr-1"></i> 重置
                    </button>
                    <button id="help-game" class="btn-pixel bg-gray-600 text-xs flex items-center justify-center">
                        <i class="fa fa-question mr-1"></i> 帮助
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 游戏区域 -->
        <div class="flex-grow bg-dark rounded-lg pixel-corners game-shadow flex flex-col">
            <div class="p-4 flex justify-between items-center bg-gray-800 rounded-t-lg pixel-corners">
                <h2 class="font-pixel text-primary">魔塔冒险</h2>
                <div class="flex items-center space-x-2">
                    <span class="text-xs bg-gray-700 px-2 py-1 rounded pixel-corners">
                        <i class="fa fa-clock-o mr-1"></i> <span id="game-time">00:00</span>
                    </span>
                    <button id="pause-game" class="btn-pixel bg-gray-600 text-xs px-3 py-1">
                        <i class="fa fa-pause mr-1"></i> 暂停
                    </button>
                </div>
            </div>
            
            <div class="flex-grow p-4 flex items-center justify-center">
                <div id="game-container" class="relative bg-gray-800 rounded-lg pixel-corners game-shadow overflow-hidden">
                    <!-- 游戏画布将在这里动态生成 -->
                    <canvas id="game-canvas" class="pixel-corners"></canvas>
                    
                    <!-- 战斗弹窗 -->
                    <div id="battle-modal" class="hidden absolute inset-0 bg-black/70 flex items-center justify-center">
                        <div class="bg-gray-800 rounded-lg pixel-corners p-6 w-64 game-shadow">
                            <h3 class="font-pixel text-primary text-center mb-4">战斗!</h3>
                            <div class="flex justify-between items-center mb-4">
                                <div class="text-center">
                                    <div class="w-12 h-12 bg-enemy rounded-lg flex items-center justify-center mx-auto mb-1">
                                        <i class="fa fa-user text-white"></i>
                                    </div>
                                    <p id="enemy-name" class="text-xs font-medium">小喽啰</p>
                                </div>
                                <div class="text-center">
                                    <i class="fa fa-exchange text-primary"></i>
                                </div>
                                <div class="text-center">
                                    <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center mx-auto mb-1">
                                        <i class="fa fa-user text-white"></i>
                                    </div>
                                    <p class="text-xs font-medium">勇者</p>
                                </div>
                            </div>
                            <div class="space-y-2 text-sm mb-4">
                                <div class="flex justify-between">
                                    <span>敌人生命:</span>
                                    <span id="enemy-hp" class="text-danger">100</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>敌人攻击:</span>
                                    <span id="enemy-attack" class="text-danger">10</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>敌人防御:</span>
                                    <span id="enemy-defense" class="text-primary">10</span>
                                </div>
                            </div>
                            <button id="fight-button" class="btn-pixel bg-danger w-full py-2 text-sm">
                                <i class="fa fa-crosshairs mr-1"></i> 攻击
                            </button>
                        </div>
                    </div>
                    
                    <!-- 物品弹窗 -->
                    <div id="item-modal" class="hidden absolute inset-0 bg-black/70 flex items-center justify-center">
                        <div class="bg-gray-800 rounded-lg pixel-corners p-6 w-64 game-shadow">
                            <h3 class="font-pixel text-primary text-center mb-4">发现物品!</h3>
                            <div class="flex justify-center mb-4">
                                <div id="item-icon" class="w-16 h-16 bg-treasure rounded-lg flex items-center justify-center">
                                    <i class="fa fa-diamond text-white text-2xl"></i>
                                </div>
                            </div>
                            <p id="item-description" class="text-center mb-4">获得了铁剑，攻击力+20</p>
                            <button id="take-item-button" class="btn-pixel bg-primary w-full py-2 text-sm">
                                <i class="fa fa-plus-circle mr-1"></i> 拾取
                            </button>
                        </div>
                    </div>
                    
                    <!-- 对话弹窗 -->
                    <div id="dialog-modal" class="hidden absolute inset-0 bg-black/70 flex items-center justify-center">
                        <div class="bg-gray-800 rounded-lg pixel-corners p-6 w-64 game-shadow">
                            <h3 class="font-pixel text-primary text-center mb-4">神秘人</h3>
                            <p id="dialog-text" class="text-center mb-4">年轻人，你已来到魔塔的第5层...</p>
                            <button id="dialog-button" class="btn-pixel bg-primary w-full py-2 text-sm">
                                <i class="fa fa-check mr-1"></i> 确定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 移动控制（移动端） -->
            <div class="lg:hidden p-4 bg-gray-800 rounded-b-lg pixel-corners">
                <div class="grid grid-cols-3 gap-2 w-40 mx-auto">
                    <div></div>
                    <button class="direction-btn bg-gray-700 h-12 rounded-lg flex items-center justify-center" data-direction="up">
                        <i class="fa fa-chevron-up text-primary"></i>
                    </button>
                    <div></div>
                    <button class="direction-btn bg-gray-700 h-12 rounded-lg flex items-center justify-center" data-direction="left">
                        <i class="fa fa-chevron-left text-primary"></i>
                    </button>
                    <div></div>
                    <button class="direction-btn bg-gray-700 h-12 rounded-lg flex items-center justify-center" data-direction="right">
                        <i class="fa fa-chevron-right text-primary"></i>
                    </button>
                    <div></div>
                    <button class="direction-btn bg-gray-700 h-12 rounded-lg flex items-center justify-center" data-direction="down">
                        <i class="fa fa-chevron-down text-primary"></i>
                    </button>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 帮助弹窗 -->
    <div id="help-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-50">
        <div class="bg-gray-800 rounded-lg pixel-corners p-6 w-full max-w-md game-shadow">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-pixel text-primary">游戏帮助</h3>
                <button id="close-help" class="text-gray-400 hover:text-white">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="space-y-4 text-sm">
                <div>
                    <h4 class="font-medium text-primary mb-1">基本操作</h4>
                    <ul class="list-disc list-inside space-y-1 text-gray-300">
                        <li>使用方向键或屏幕按钮移动角色</li>
                        <li>遇到敌人时自动进入战斗</li>
                        <li>找到楼梯可以上下楼层</li>
                        <li>拾取物品可以提升属性</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium text-primary mb-1">战斗规则</h4>
                    <ul class="list-disc list-inside space-y-1 text-gray-300">
                        <li>你的伤害 = 你的攻击 - 敌人防御</li>
                        <li>敌人伤害 = 敌人攻击 - 你的防御</li>
                        <li>击败敌人可以获得金币和经验</li>
                        <li>生命值降为0则游戏结束</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium text-primary mb-1">特殊元素</h4>
                    <ul class="list-disc list-inside space-y-1 text-gray-300">
                        <li>黄色门：需要黄色钥匙打开</li>
                        <li>蓝色门：需要蓝色钥匙打开</li>
                        <li>红色门：需要红色钥匙打开</li>
                        <li>商店：可以购买装备和道具</li>
                        <li>NPC：可能提供任务或提示</li>
                    </ul>
                </div>
            </div>
            <button id="close-help-btn" class="btn-pixel bg-primary w-full mt-4 py-2">
                <i class="fa fa-check mr-1"></i> 我知道了
            </button>
        </div>
    </div>

    <script>
        // 游戏常量
        const TILE_SIZE = 32;
        const MAP_WIDTH = 11;
        const MAP_HEIGHT = 11;
        
        // 游戏状态
        const gameState = {
            player: {
                x: 5,
                y: 9,
                hp: 1000,
                maxHp: 1000,
                attack: 10,
                defense: 10,
                gold: 0,
                exp: 0,
                level: 1,
                keys: {
                    yellow: 0,
                    blue: 0,
                    red: 0
                },
                equipment: [
                    { name: "木剑", attack: 5 },
                    { name: "皮甲", defense: 5 }
                ]
            },
            currentFloor: 1,
            maps: [],
            messages: ["欢迎来到魔塔50层!"],
            isPaused: false,
            gameTime: 0,
            timerInterval: null
        };
        
        // 元素类型
        const TILE_TYPES = {
            FLOOR: 0,       // 地板
            WALL: 1,        // 墙
            YELLOW_DOOR: 2, // 黄色门
            BLUE_DOOR: 3,   // 蓝色门
            RED_DOOR: 4,    // 红色门
            YELLOW_KEY: 5,  // 黄色钥匙
            BLUE_KEY: 6,    // 蓝色钥匙
            RED_KEY: 7,     // 红色钥匙
            WEAPON: 8,      // 武器
            ARMOR: 9,       // 护甲
            HP_POTION: 10,  // 生命药水
            GOLD: 11,       // 金币
            ENEMY: 12,      // 敌人
            STAIR_UP: 13,   // 上楼楼梯
            STAIR_DOWN: 14, // 下楼楼梯
            NPC: 15,        // NPC
            SHOP: 16        // 商店
        };
        
        // 敌人类型
        const ENEMY_TYPES = {
            SLIME: { name: "史莱姆", hp: 50, attack: 10, defense: 5, gold: 5, exp: 5 },
            GOBLIN: { name: "哥布林", hp: 100, attack: 15, defense: 8, gold: 10, exp: 10 },
            SKELETON: { name: "骷髅", hp: 150, attack: 20, defense: 10, gold: 15, exp: 15 },
            ORC: { name: "兽人", hp: 250, attack: 30, defense: 15, gold: 25, exp: 25 },
            BAT: { name: "蝙蝠", hp: 120, attack: 25, defense: 5, gold: 12, exp: 12 },
            WARLOCK: { name: "巫师", hp: 200, attack: 35, defense: 12, gold: 30, exp: 30 },
            KNIGHT: { name: "骑士", hp: 300, attack: 40, defense: 20, gold: 40, exp: 40 },
            DRAGON: { name: "龙", hp: 1000, attack: 80, defense: 50, gold: 200, exp: 200 }
        };
        
        // 装备类型
        const EQUIPMENT_TYPES = {
            WEAPONS: [
                { name: "铁剑", attack: 20, price: 100 },
                { name: "钢剑", attack: 40, price: 300 },
                { name: "魔剑", attack: 70, price: 800 },
                { name: "圣剑", attack: 120, price: 2000 }
            ],
            ARMORS: [
                { name: "铁甲", defense: 20, price: 100 },
                { name: "钢甲", defense: 40, price: 300 },
                { name: "魔甲", defense: 70, price: 800 },
                { name: "圣甲", defense: 120, price: 2000 }
            ]
        };
        
        // DOM 元素
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        const gameContainer = document.getElementById('game-container');
        const currentFloorElement = document.getElementById('current-floor');
        const playerNameElement = document.getElementById('player-name');
        const playerHpElement = document.getElementById('player-hp');
        const playerAttackElement = document.getElementById('player-attack');
        const playerDefenseElement = document.getElementById('player-defense');
        const playerGoldElement = document.getElementById('player-gold');
        const playerExpElement = document.getElementById('player-exp');
        const playerEquipmentElement = document.getElementById('player-equipment');
        const gameMessagesElement = document.getElementById('game-messages');
        const gameTimeElement = document.getElementById('game-time');
        const battleModal = document.getElementById('battle-modal');
        const enemyNameElement = document.getElementById('enemy-name');
        const enemyHpElement = document.getElementById('enemy-hp');
        const enemyAttackElement = document.getElementById('enemy-attack');
        const enemyDefenseElement = document.getElementById('enemy-defense');
        const fightButton = document.getElementById('fight-button');
        const itemModal = document.getElementById('item-modal');
        const itemIcon = document.getElementById('item-icon');
        const itemDescription = document.getElementById('item-description');
        const takeItemButton = document.getElementById('take-item-button');
        const dialogModal = document.getElementById('dialog-modal');
        const dialogText = document.getElementById('dialog-text');
        const dialogButton = document.getElementById('dialog-button');
        const pauseGameButton = document.getElementById('pause-game');
        const saveGameButton = document.getElementById('save-game');
        const loadGameButton = document.getElementById('load-game');
        const restartGameButton = document.getElementById('restart-game');
        const helpGameButton = document.getElementById('help-game');
        const helpModal = document.getElementById('help-modal');
        const closeHelpButton = document.getElementById('close-help');
        const closeHelpBtn = document.getElementById('close-help-btn');
        const directionButtons = document.querySelectorAll('.direction-btn');
        
        // 当前选中的敌人（战斗中）
        let currentEnemy = null;
        let currentItem = null;
        
        // 初始化游戏
        function initGame() {
            // 设置画布尺寸
            canvas.width = MAP_WIDTH * TILE_SIZE;
            canvas.height = MAP_HEIGHT * TILE_SIZE;
            
            // 调整游戏容器大小
            const containerWidth = gameContainer.clientWidth;
            const containerHeight = gameContainer.clientHeight;
            const gameRatio = canvas.width / canvas.height;
            const containerRatio = containerWidth / containerHeight;
            
            if (containerRatio > gameRatio) {
                canvas.style.height = '100%';
                canvas.style.width = 'auto';
            } else {
                canvas.style.width = '100%';
                canvas.style.height = 'auto';
            }
            
            // 初始化地图
            initMaps();
            
            // 绘制初始地图
            drawMap();
            
            // 更新游戏信息
            updateGameInfo();
            
            // 开始计时
            startGameTimer();
            
            // 添加键盘控制
            document.addEventListener('keydown', handleKeydown);
            
            // 添加移动端按钮控制
            directionButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const direction = button.dataset.direction;
                    movePlayer(direction);
                });
            });
            
            // 战斗按钮事件
            fightButton.addEventListener('click', handleFight);
            
            // 拾取物品按钮事件
            takeItemButton.addEventListener('click', handleTakeItem);
            
            // 对话框按钮事件
            dialogButton.addEventListener('click', () => {
                dialogModal.classList.add('hidden');
            });
            
            // 暂停游戏按钮事件
            pauseGameButton.addEventListener('click', togglePause);
            
            // 保存游戏按钮事件
            saveGameButton.addEventListener('click', saveGame);
            
            // 加载游戏按钮事件
            loadGameButton.addEventListener('click', loadGame);
            
            // 重置游戏按钮事件
            restartGameButton.addEventListener('click', restartGame);
            
            // 帮助按钮事件
            helpGameButton.addEventListener('click', () => {
                helpModal.classList.remove('hidden');
            });
            
            // 关闭帮助按钮事件
            closeHelpButton.addEventListener('click', () => {
                helpModal.classList.add('hidden');
            });
            
            closeHelpBtn.addEventListener('click', () => {
                helpModal.classList.add('hidden');
            });
            
            // 添加消息
            addMessage("使用方向键移动角色");
            addMessage("击败怪物获取金币和经验");
            addMessage("寻找楼梯前往下一层");
        }
        
        // 初始化地图
        function initMaps() {
            // 为简化示例，仅创建3层地图
            for (let floor = 1; floor <= 3; floor++) {
                const map = createMap(floor);
                gameState.maps[floor] = map;
            }
        }
        
        // 创建地图
        function createMap(floor) {
            // 创建空地图（全部为地板）
            const map = Array(MAP_HEIGHT).fill().map(() => Array(MAP_WIDTH).fill(TILE_TYPES.FLOOR));
            
            // 添加边界墙
            for (let x = 0; x < MAP_WIDTH; x++) {
                map[0][x] = TILE_TYPES.WALL;
                map[MAP_HEIGHT - 1][x] = TILE_TYPES.WALL;
            }
            
            for (let y = 0; y < MAP_HEIGHT; y++) {
                map[y][0] = TILE_TYPES.WALL;
                map[y][MAP_WIDTH - 1] = TILE_TYPES.WALL;
            }
            
            // 根据楼层添加不同的元素
            if (floor === 1) {
                // 添加一些墙
                map[2][2] = TILE_TYPES.WALL;
                map[2][3] = TILE_TYPES.WALL;
                map[2][4] = TILE_TYPES.WALL;
                map[2][5] = TILE_TYPES.WALL;
                map[3][5] = TILE_TYPES.WALL;
                map[4][5] = TILE_TYPES.WALL;
                
                // 添加黄色门
                map[5][5] = TILE_TYPES.YELLOW_DOOR;
                
                // 添加黄色钥匙
                map[3][2] = TILE_TYPES.YELLOW_KEY;
                
                // 添加敌人
                map[7][3] = { type: TILE_TYPES.ENEMY, enemyType: ENEMY_TYPES.SLIME };
                map[5][7] = { type: TILE_TYPES.ENEMY, enemyType: ENEMY_TYPES.GOBLIN };
                
                // 添加武器
                map[8][7] = { type: TILE_TYPES.WEAPON, weaponType: EQUIPMENT_TYPES.WEAPONS[0] };
                
                // 添加下楼楼梯（通往第一层）
                map[3][8] = TILE_TYPES.STAIR_DOWN;
                
                // 添加上楼楼梯（通往第二层）
                map[8][3] = TILE_TYPES.STAIR_UP;
            } else if (floor === 2) {
                // 添加一些墙
                map[2][2] = TILE_TYPES.WALL;
                map[2][3] = TILE_TYPES.WALL;
                map[2][4] = TILE_TYPES.WALL;
                map[2][5] = TILE_TYPES.WALL;
                map[2][6] = TILE_TYPES.WALL;
                map[3][6] = TILE_TYPES.WALL;
                map[4][6] = TILE_TYPES.WALL;
                map[5][6] = TILE_TYPES.WALL;
                
                // 添加蓝色门
                map[5][5] = TILE_TYPES.BLUE_DOOR;
                
                // 添加蓝色钥匙
                map[7][3] = TILE_TYPES.BLUE_KEY;
                
                // 添加敌人
                map[3][3] = { type: TILE_TYPES.ENEMY, enemyType: ENEMY_TYPES.SKELETON };
                map[7][7] = { type: TILE_TYPES.ENEMY, enemyType: ENEMY_TYPES.ORC };
                
                // 添加护甲
                map[8][7] = { type: TILE_TYPES.ARMOR, armorType: EQUIPMENT_TYPES.ARMORS[0] };
                
                // 添加下楼楼梯（通往第一层）
                map[3][8] = TILE_TYPES.STAIR_DOWN;
                
                // 添加上楼楼梯（通往第三层）
                map[8][3] = TILE_TYPES.STAIR_UP;
            } else if (floor === 3) {
                // 添加一些墙
                map[2][2] = TILE_TYPES.WALL;
                map[2][3] = TILE_TYPES.WALL;
                map[2][4] = TILE_TYPES.WALL;
                map[3][4] = TILE_TYPES.WALL;
                map[4][4] = TILE_TYPES.WALL;
                map[5][4] = TILE_TYPES.WALL;
                
                // 添加红色门
                map[5][5] = TILE_TYPES.RED_DOOR;
                
                // 添加红色钥匙
                map[7][3] = TILE_TYPES.RED_KEY;
                
                // 添加敌人
                map[3][3] = { type: TILE_TYPES.ENEMY, enemyType: ENEMY_TYPES.WARLOCK };
                map[7][7] = { type: TILE_TYPES.ENEMY, enemyType: ENEMY_TYPES.KNIGHT };
                map[5][7] = { type: TILE_TYPES.ENEMY, enemyType: ENEMY_TYPES.DRAGON };
                
                // 添加终极武器
                map[8][7] = { type: TILE_TYPES.WEAPON, weaponType: EQUIPMENT_TYPES.WEAPONS[1] };
                
                // 添加下楼楼梯（通往第二层）
                map[3][8] = TILE_TYPES.STAIR_DOWN;
                
                // 添加NPC
                map[8][5] = { type: TILE_TYPES.NPC, message: "恭喜你到达第三层！继续前进，击败魔龙！" };
            }
            
            return map;
        }
        
        // 绘制地图
        function drawMap() {
            const map = gameState.maps[gameState.currentFloor];
            
            // 清空画布
            ctx.fillStyle = '#2D3748';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制地图元素
            for (let y = 0; y < MAP_HEIGHT; y++) {
                for (let x = 0; x < MAP_WIDTH; x++) {
                    const tile = map[y][x];
                    let color, icon;
                    
                    switch (typeof tile === 'object' ? tile.type : tile) {
                        case TILE_TYPES.FLOOR:
                            color = '#4A5568';
                            break;
                        case TILE_TYPES.WALL:
                            color = '#718096';
                            icon = 'fa-square';
                            break;
                        case TILE_TYPES.YELLOW_DOOR:
                            color = '#FAAD14';
                            icon = 'fa-door-closed';
                            break;
                        case TILE_TYPES.BLUE_DOOR:
                            color = '#1890FF';
                            icon = 'fa-door-closed';
                            break;
                        case TILE_TYPES.RED_DOOR:
                            color = '#FF4D4F';
                            icon = 'fa-door-closed';
                            break;
                        case TILE_TYPES.YELLOW_KEY:
                            color = '#FAAD14';
                            icon = 'fa-key';
                            break;
                        case TILE_TYPES.BLUE_KEY:
                            color = '#1890FF';
                            icon = 'fa-key';
                            break;
                        case TILE_TYPES.RED_KEY:
                            color = '#FF4D4F';
                            icon = 'fa-key';
                            break;
                        case TILE_TYPES.WEAPON:
                            color = '#B71C1C';
                            icon = 'fa-sword';
                            break;
                        case TILE_TYPES.ARMOR:
                            color = '#0D47A1';
                            icon = 'fa-shield';
                            break;
                        case TILE_TYPES.HP_POTION:
                            color = '#43A047';
                            icon = 'fa-flask';
                            break;
                        case TILE_TYPES.GOLD:
                            color = '#F9A825';
                            icon = 'fa-coins';
                            break;
                        case TILE_TYPES.ENEMY:
                            color = '#B71C1C';
                            icon = 'fa-user';
                            break;
                        case TILE_TYPES.STAIR_UP:
                            color = '#5B8C5A';
                            icon = 'fa-arrow-up';
                            break;
                        case TILE_TYPES.STAIR_DOWN:
                            color = '#5B8C5A';
                            icon = 'fa-arrow-down';
                            break;
                        case TILE_TYPES.NPC:
                            color = '#9C27B0';
                            icon = 'fa-user';
                            break;
                        case TILE_TYPES.SHOP:
                            color = '#FF9800';
                            icon = 'fa-store';
                            break;
                    }
                    
                    // 绘制方块
                    ctx.fillStyle = color || '#2D3748';
                    ctx.fillRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                    
                    // 添加边框
                    ctx.strokeStyle = '#1A202C';
                    ctx.lineWidth = 1;
                    ctx.strokeRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                    
                    // 绘制图标
                    if (icon) {
                        drawIcon(icon, x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE);
                    }
                }
            }
            
            // 绘制玩家
            ctx.fillStyle = '#165DFF';
            ctx.fillRect(gameState.player.x * TILE_SIZE, gameState.player.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
            
            // 添加玩家边框
            ctx.strokeStyle = '#FFFFFF';
            ctx.lineWidth = 2;
            ctx.strokeRect(gameState.player.x * TILE_SIZE, gameState.player.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
            
            // 绘制玩家图标
            drawIcon('fa-user', gameState.player.x * TILE_SIZE, gameState.player.y * TILE_SIZE, TILE_SIZE);
        }
        
        // 绘制图标
        function drawIcon(iconClass, x, y, size) {
            // 创建临时元素来获取图标的路径
            const iconElement = document.createElement('i');
            iconElement.className = `fa ${iconClass}`;
            document.body.appendChild(iconElement);
            
            // 使用Canvas绘制图标
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('width', size);
            svg.setAttribute('height', size);
            
            const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
            const iconId = iconElement.getAttribute('data-fa-i2svg');
            use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', `#${iconId}`);
            
            svg.appendChild(use);
            document.body.appendChild(svg);
            
            // 将SVG转换为Canvas
            const svgData = new XMLSerializer().serializeToString(svg);
            const img = new Image();
            img.onload = function() {
                ctx.drawImage(img, x, y, size, size);
                document.body.removeChild(svg);
                document.body.removeChild(iconElement);
            };
            img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
        }
        
        // 更新游戏信息
        function updateGameInfo() {
            currentFloorElement.textContent = gameState.currentFloor;
            playerHpElement.textContent = gameState.player.hp;
            playerAttackElement.textContent = gameState.player.attack;
            playerDefenseElement.textContent = gameState.player.defense;
            playerGoldElement.textContent = gameState.player.gold;
            playerExpElement.textContent = gameState.player.exp;
            
            // 更新装备显示
            playerEquipmentElement.innerHTML = '';
            gameState.player.equipment.forEach(item => {
                const itemElement = document.createElement('div');
                itemElement.className = 'bg-gray-700 rounded pixel-corners p-2 text-center text-xs';
                itemElement.innerHTML = `
                    <i class="fa ${item.name.includes('剑') ? 'fa-sword' : 'fa-shield'} text-gray-300"></i>
                    <p class="mt-1">${item.name}</p>
                `;
                playerEquipmentElement.appendChild(itemElement);
            });
            
            // 更新消息日志
            gameMessagesElement.innerHTML = '';
            gameState.messages.slice(-10).forEach(message => {
                const messageElement = document.createElement('p');
                messageElement.textContent = message;
                gameMessagesElement.appendChild(messageElement);
            });
            
            // 滚动到底部
            gameMessagesElement.scrollTop = gameMessagesElement.scrollHeight;
        }
        
        // 处理键盘事件
        function handleKeydown(event) {
            if (gameState.isPaused) return;
            
            switch (event.key) {
                case 'ArrowUp':
                    movePlayer('up');
                    break;
                case 'ArrowDown':
                    movePlayer('down');
                    break;
                case 'ArrowLeft':
                    movePlayer('left');
                    break;
                case 'ArrowRight':
                    movePlayer('right');
                    break;
                case 'p':
                case 'P':
                    togglePause();
                    break;
            }
        }
        
        // 移动玩家
        function movePlayer(direction) {
            let newX = gameState.player.x;
            let newY = gameState.player.y;
            
            switch (direction) {
                case 'up':
                    newY--;
                    break;
                case 'down':
                    newY++;
                    break;
                case 'left':
                    newX--;
                    break;
                case 'right':
                    newX++;
                    break;
            }
            
            // 检查是否超出边界
            if (newX < 0 || newX >= MAP_WIDTH || newY < 0 || newY >= MAP_HEIGHT) {
                return;
            }
            
            const map = gameState.maps[gameState.currentFloor];
            const targetTile = map[newY][newX];
            
            // 处理碰撞
            if (typeof targetTile === 'object') {
                // 处理特殊元素
                if (targetTile.type === TILE_TYPES.ENEMY) {
                    // 开始战斗
                    startBattle(targetTile.enemyType);
                    return;
                } else if (targetTile.type === TILE_TYPES.WEAPON) {
                    // 发现武器
                    showItemModal(targetTile.weaponType, 'weapon');
                    return;
                } else if (targetTile.type === TILE_TYPES.ARMOR) {
                    // 发现护甲
                    showItemModal(targetTile.armorType, 'armor');
                    return;
                } else if (targetTile.type === TILE_TYPES.GOLD) {
                    // 发现金币
                    const goldAmount = Math.floor(Math.random() * 10) + 5;
                    gameState.player.gold += goldAmount;
                    addMessage(`获得了 ${goldAmount} 金币！`);
                    map[newY][newX] = TILE_TYPES.FLOOR;
                } else if (targetTile.type === TILE_TYPES.HP_POTION) {
                    // 发现生命药水
                    const hpAmount = Math.floor(Math.random() * 100) + 50;
                    gameState.player.hp = Math.min(gameState.player.maxHp, gameState.player.hp + hpAmount);
                    addMessage(`使用了生命药水，恢复了 ${hpAmount} 点生命值！`);
                    map[newY][newX] = TILE_TYPES.FLOOR;
                } else if (targetTile.type === TILE_TYPES.YELLOW_KEY) {
                    // 发现黄色钥匙
                    gameState.player.keys.yellow++;
                    addMessage(`获得了黄色钥匙！`);
                    map[newY][newX] = TILE_TYPES.FLOOR;
                } else if (targetTile.type === TILE_TYPES.BLUE_KEY) {
                    // 发现蓝色钥匙
                    gameState.player.keys.blue++;
                    addMessage(`获得了蓝色钥匙！`);
                    map[newY][newX] = TILE_TYPES.FLOOR;
                } else if (targetTile.type === TILE_TYPES.RED_KEY) {
                    // 发现红色钥匙
                    gameState.player.keys.red++;
                    addMessage(`获得了红色钥匙！`);
                    map[newY][newX] = TILE_TYPES.FLOOR;
                } else if (targetTile.type === TILE_TYPES.NPC) {
                    // 与NPC对话
                    showDialogModal(targetTile.message);
                    return;
                } else if (targetTile.type === TILE_TYPES.SHOP) {
                    // 进入商店
                    showDialogModal("欢迎来到商店！这里可以购买装备提升实力。");
                    return;
                }
            } else {
                // 处理普通元素
                switch (targetTile) {
                    case TILE_TYPES.WALL:
                        return; // 不能穿过墙
                    case TILE_TYPES.YELLOW_DOOR:
                        if (gameState.player.keys.yellow > 0) {
                            gameState.player.keys.yellow--;
                            map[newY][newX] = TILE_TYPES.FLOOR;
                            addMessage(`使用了黄色钥匙打开了门！`);
                        } else {
                            addMessage(`需要黄色钥匙才能打开这扇门！`);
                            return;
                        }
                        break;
                    case TILE_TYPES.BLUE_DOOR:
                        if (gameState.player.keys.blue > 0) {
                            gameState.player.keys.blue--;
                            map[newY][newX] = TILE_TYPES.FLOOR;
                            addMessage(`使用了蓝色钥匙打开了门！`);
                        } else {
                            addMessage(`需要蓝色钥匙才能打开这扇门！`);
                            return;
                        }
                        break;
                    case TILE_TYPES.RED_DOOR:
                        if (gameState.player.keys.red > 0) {
                            gameState.player.keys.red--;
                            map[newY][newX] = TILE_TYPES.FLOOR;
                            addMessage(`使用了红色钥匙打开了门！`);
                        } else {
                            addMessage(`需要红色钥匙才能打开这扇门！`);
                            return;
                        }
                        break;
                    case TILE_TYPES.STAIR_UP:
                        if (gameState.currentFloor < 3) { // 假设总共有3层
                            gameState.currentFloor++;
                            // 调整玩家位置到新楼层的入口
                            gameState.player.x = 3;
                            gameState.player.y = 8;
                            addMessage(`上到了第 ${gameState.currentFloor} 层！`);
                        } else {
                            addMessage(`这是顶层，无法继续向上！`);
                            return;
                        }
                        break;
                    case TILE_TYPES.STAIR_DOWN:
                        if (gameState.currentFloor > 1) {
                            gameState.currentFloor--;
                            // 调整玩家位置到新楼层的入口
                            gameState.player.x = 8;
                            gameState.player.y = 3;
                            addMessage(`下到了第 ${gameState.currentFloor} 层！`);
                        } else {
                            addMessage(`这是第一层，无法继续向下！`);
                            return;
                        }
                        break;
                }
            }
            
            // 更新玩家位置
            gameState.player.x = newX;
            gameState.player.y = newY;
            
            // 重绘地图
            drawMap();
            
            // 更新游戏信息
            updateGameInfo();
        }
        
        // 开始战斗
        function startBattle(enemyType) {
            currentEnemy = { ...enemyType, hp: enemyType.hp };
            
            // 更新战斗信息
            enemyNameElement.textContent = currentEnemy.name;
            enemyHpElement.textContent = currentEnemy.hp;
            enemyAttackElement.textContent = currentEnemy.attack;
            enemyDefenseElement.textContent = currentEnemy.defense;
            
            // 显示战斗弹窗
            battleModal.classList.remove('hidden');
            
            // 添加闪烁效果
            const map = gameState.maps[gameState.currentFloor];
            const enemyPos = findEnemyPosition(map, currentEnemy);
            if (enemyPos) {
                const enemyTile = map[enemyPos.y][enemyPos.x];
                map[enemyPos.y][enemyPos.x] = { ...enemyTile, blinking: true };
                drawMap();
            }
        }
        
        // 查找敌人位置
        function findEnemyPosition(map, enemy) {
            for (let y = 0; y < MAP_HEIGHT; y++) {
                for (let x = 0; x < MAP_WIDTH; x++) {
                    const tile = map[y][x];
                    if (typeof tile === 'object' && 
                        tile.type === TILE_TYPES.ENEMY && 
                        tile.enemyType.name === enemy.name) {
                        return { x, y };
                    }
                }
            }
            return null;
        }
        
        // 处理战斗
        function handleFight() {
            if (!currentEnemy) return;
            
            // 计算伤害
            const playerDamage = Math.max(1, gameState.player.attack - currentEnemy.defense);
            const enemyDamage = Math.max(1, currentEnemy.attack - gameState.player.defense);
            
            // 应用伤害
            currentEnemy.hp -= playerDamage;
            gameState.player.hp -= enemyDamage;
            
            // 更新战斗信息
            enemyHpElement.textContent = currentEnemy.hp;
            playerHpElement.textContent = gameState.player.hp;
            
            // 添加战斗消息
            addMessage(`你对 ${currentEnemy.name} 造成了 ${playerDamage} 点伤害！`);
            addMessage(`${currentEnemy.name} 对你造成了 ${enemyDamage} 点伤害！`);
            
            // 检查战斗结果
            if (currentEnemy.hp <= 0) {
                // 敌人被击败
                const map = gameState.maps[gameState.currentFloor];
                const enemyPos = findEnemyPosition(map, currentEnemy);
                if (enemyPos) {
                    map[enemyPos.y][enemyPos.x] = TILE_TYPES.FLOOR;
                }
                
                // 获得奖励
                gameState.player.gold += currentEnemy.gold;
                gameState.player.exp += currentEnemy.exp;
                
                // 检查是否升级
                let leveledUp = false;
                const requiredExp = gameState.player.level * 100;
                if (gameState.player.exp >= requiredExp) {
                    gameState.player.level++;
                    gameState.player.exp -= requiredExp;
                    gameState.player.attack += 10;
                    gameState.player.defense += 10;
                    gameState.player.maxHp += 200;
                    gameState.player.hp = gameState.player.maxHp;
                    leveledUp = true;
                    
                    addMessage(`恭喜！你升级到了 ${gameState.player.level} 级！`);
                    addMessage(`攻击力 +10，防御力 +10，最大生命值 +200`);
                }
                
                addMessage(`你击败了 ${currentEnemy.name}，获得了 ${currentEnemy.gold} 金币和 ${currentEnemy.exp} 经验！`);
                
                // 隐藏战斗弹窗
                battleModal.classList.add('hidden');
                
                // 重绘地图
                drawMap();
                
                // 更新游戏信息
                updateGameInfo();
                
                // 检查游戏胜利条件
                if (currentEnemy.name === "龙" && gameState.currentFloor === 3) {
                    showDialogModal("恭喜你击败了魔龙！你成功通关了魔塔50层！");
                }
            } else if (gameState.player.hp <= 0) {
                // 玩家死亡
                addMessage("你被击败了...游戏结束！");
                
                // 隐藏战斗弹窗
                battleModal.classList.add('hidden');
                
                // 显示游戏结束对话框
                showDialogModal("你被击败了！游戏结束。");
                
                // 可以在这里添加游戏重置选项
            }
        }
        
        // 显示物品弹窗
        function showItemModal(item, type) {
            currentItem = { ...item, type };
            
            // 更新物品信息
            itemIcon.className = `fa ${type === 'weapon' ? 'fa-sword' : 'fa-shield'} text-white text-2xl`;
            
            if (type === 'weapon') {
                itemDescription.textContent = `获得了 ${item.name}，攻击力+${item.attack}`;
            } else {
                itemDescription.textContent = `获得了 ${item.name}，防御力+${item.defense}`;
            }
            
            // 显示物品弹窗
            itemModal.classList.remove('hidden');
        }
        
        // 拾取物品
        function handleTakeItem() {
            if (!currentItem) return;
            
            if (currentItem.type === 'weapon') {
                // 替换武器
                const oldWeapon = gameState.player.equipment.find(item => item.name.includes('剑'));
                if (oldWeapon) {
                    addMessage(`你将 ${oldWeapon.name} 替换为 ${currentItem.name}`);
                } else {
                    addMessage(`你获得了 ${currentItem.name}`);
                }
                
                // 更新攻击力
                gameState.player.attack = (gameState.player.attack - (oldWeapon?.attack || 0)) + currentItem.attack;
                
                // 更新装备
                gameState.player.equipment = gameState.player.equipment.filter(item => !item.name.includes('剑'));
                gameState.player.equipment.push({ name: currentItem.name, attack: currentItem.attack });
            } else {
                // 替换护甲
                const oldArmor = gameState.player.equipment.find(item => item.name.includes('甲'));
                if (oldArmor) {
                    addMessage(`你将 ${oldArmor.name} 替换为 ${currentItem.name}`);
                } else {
                    addMessage(`你获得了 ${currentItem.name}`);
                }
                
                // 更新防御力
                gameState.player.defense = (gameState.player.defense - (oldArmor?.defense || 0)) + currentItem.defense;
                
                // 更新装备
                gameState.player.equipment = gameState.player.equipment.filter(item => !item.name.includes('甲'));
                gameState.player.equipment.push({ name: currentItem.name, defense: currentItem.defense });
            }
            
            // 从地图上移除物品
            const map = gameState.maps[gameState.currentFloor];
            for (let y = 0; y < MAP_HEIGHT; y++) {
                for (let x = 0; x < MAP_WIDTH; x++) {
                    const tile = map[y][x];
                    if (typeof tile === 'object' && 
                        ((tile.type === TILE_TYPES.WEAPON && tile.weaponType.name === currentItem.name) ||
                         (tile.type === TILE_TYPES.ARMOR && tile.armorType.name === currentItem.name))) {
                        map[y][x] = TILE_TYPES.FLOOR;
                        break;
                    }
                }
            }
            
            // 隐藏物品弹窗
            itemModal.classList.add('hidden');
            
            // 重绘地图
            drawMap();
            
            // 更新游戏信息
            updateGameInfo();
        }
        
        // 显示对话弹窗
        function showDialogModal(message) {
            dialogText.textContent = message;
            dialogModal.classList.remove('hidden');
        }
        
        // 切换暂停状态
        function togglePause() {
            gameState.isPaused = !gameState.isPaused;
            
            if (gameState.isPaused) {
                pauseGameButton.innerHTML = '<i class="fa fa-play mr-1"></i> 继续';
                addMessage("游戏已暂停");
                stopGameTimer();
            } else {
                pauseGameButton.innerHTML = '<i class="fa fa-pause mr-1"></i> 暂停';
                addMessage("游戏已继续");
                startGameTimer();
            }
        }
        
        // 开始游戏计时器
        function startGameTimer() {
            if (gameState.timerInterval) return;
            
            gameState.timerInterval = setInterval(() => {
                gameState.gameTime++;
                updateGameTime();
            }, 1000);
        }
        
        // 停止游戏计时器
        function stopGameTimer() {
            clearInterval(gameState.timerInterval);
            gameState.timerInterval = null;
        }
        
        // 更新游戏时间显示
        function updateGameTime() {
            const minutes = Math.floor(gameState.gameTime / 60);
            const seconds = gameState.gameTime % 60;
            gameTimeElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 添加消息到日志
        function addMessage(message) {
            gameState.messages.push(message);
            updateGameInfo();
        }
        
        // 保存游戏
        function saveGame() {
            try {
                localStorage.setItem('mota-game-save', JSON.stringify(gameState));
                addMessage("游戏已保存！");
            } catch (error) {
                console.error("保存游戏时出错:", error);
                addMessage("保存游戏失败！");
            }
        }
        
        // 加载游戏
        function loadGame() {
            try {
                const savedGame = localStorage.getItem('mota-game-save');
                if (savedGame) {
                    const parsedGame = JSON.parse(savedGame);
                    Object.assign(gameState, parsedGame);
                    
                    // 重绘地图
                    drawMap();
                    
                    // 更新游戏信息
                    updateGameInfo();
                    
                    addMessage("游戏已加载！");
                } else {
                    addMessage("没有找到保存的游戏！");
                }
            } catch (error) {
                console.error("加载游戏时出错:", error);
                addMessage("加载游戏失败！");
            }
        }
        
        // 重置游戏
        function restartGame() {
            if (confirm("确定要重新开始游戏吗？当前进度将丢失！")) {
                // 重置游戏状态
                gameState.player = {
                    x: 5,
                    y: 9,
                    hp: 1000,
                    maxHp: 1000,
                    attack: 10,
                    defense: 10,
                    gold: 0,
                    exp: 0,
                    level: 1,
                    keys: {
                        yellow: 0,
                        blue: 0,
                        red: 0
                    },
                    equipment: [
                        { name: "木剑", attack: 5 },
                        { name: "皮甲", defense: 5 }
                    ]
                };
                gameState.currentFloor = 1;
                gameState.messages = ["欢迎来到魔塔50层!"];
                gameState.isPaused = false;
                
                // 重绘地图
                drawMap();
                
                // 更新游戏信息
                updateGameInfo();
                
                // 重新开始计时器
                stopGameTimer();
                gameState.gameTime = 0;
                updateGameTime();
                startGameTimer();
                
                addMessage("游戏已重置！");
            }
        }
        
        // 窗口大小改变时调整画布
        window.addEventListener('resize', () => {
            const containerWidth = gameContainer.clientWidth;
            const containerHeight = gameContainer.clientHeight;
            const gameRatio = canvas.width / canvas.height;
            const containerRatio = containerWidth / containerHeight;
            
            if (containerRatio > gameRatio) {
                canvas.style.height = '100%';
                canvas.style.width = 'auto';
            } else {
                canvas.style.width = '100%';
                canvas.style.height = 'auto';
            }
        });
        
        // 初始化游戏
        initGame();
    </script>
</body>
</html>
    